<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>自美系统管理</title>
    <link rel="stylesheet" href="../../static/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="./static/fonts/iconfont.css">
    <link rel="stylesheet" href="./static/css/index.css">
</head>

<body>
    <div id="app">
        <div class="app-wrapper openSidebar">
            <div class="sidebar-container" :class="{'is-active':isCollapse}">
                <!-- 左侧菜单 Start -->
                <el-menu :collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="this.$route.path" mode="vertical" @select="menuselect" background-color="#304156" text-color="#fff" active-text-color="#ffd04b">
                    <template v-for="route in routes">
                        <el-menu-item v-if="!route.children" :index="route.path">
                            <i :class="route.meta.icon"></i>
                            <span>{{ route.meta.title }}</span>
                        </el-menu-item>
                        <el-submenu v-else ref="subMenu" :index="route.path" popper-append-to-body>
                            <template slot="title">
                                <i :class="route.meta.icon"></i>
                                <span>{{ route.meta.title }}</span>
                            </template>
                    <el-menu-item v-for="route2 in route.children" :key="route2.path" :index="resolvePath(route.path,route2.path)">
                        <i :class="route2.meta.icon"></i>
                        <span>{{ route2.meta.title }}</span>
                    </el-menu-item>
                    </el-submenu>
                    </template>
                </el-menu>
                <!-- 左侧菜单 End -->
            </div>
            <div class="main-container" :class="{'is-active':isCollapse}">
                <div>
                    <div class="navbar">
                        <div class="hamburger-container" style="padding: 0px 15px;" @click="toggleClick">
                            <svg :class="{'is-active':isCollapse}" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="hamburger"><path data-v-4e6f274c="" d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"></path></svg>
                        </div>

                        <el-breadcrumb class="app-breadcrumb" separator="/">
                            <transition-group name="breadcrumb">
                                <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
                                    <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
                                    <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
                                </el-breadcrumb-item>
                            </transition-group>
                        </el-breadcrumb>
                    </div>
                </div>
                <section class="app-main">
                    <iframe frameborder="0" height="100%" id="appmain" name="appmain" width="100%"></iframe>
                </section>
            </div>

        </div>
    </div>
</body>
<!-- import Vue before Element -->
<script src="../static/vue/vue.js"></script>
<script src="../static/vue/vue-router.js"></script>
<script src="../static/vue/axios.min.js"></script>
<script src="../static/element-ui/index.js"></script>
<script>
    const baseURL = "../";

    // 定义路由
    var router = new VueRouter()

    // 遍历后台传来的路由字符串，转换为组件对象
    function filterAsyncRouter(asyncRouterMap) {
        const accessedRouters = asyncRouterMap.filter(route => {
            if (route.children && route.children.length) {
                route.children = filterAsyncRouter(route.children)
            }
            return true
        })
        return accessedRouters
    }

    function routerGo(getRouter) {
        getRouter = filterAsyncRouter(getRouter) // 过滤路由
        router.addRoutes(getRouter) // 动态添加路由
        return getRouter
    }

    function isExternal(path) {
        return /^(https?:|mailto:|tel:)/.test(path)
    }

    new Vue({
        el: '#app',
        data: function() {
            return {
                isCollapse: false,
                levelList: null,
                getRouter: []
            }
        },
        created: function() {
            var _this = this;
            // 获取远程路由表
            var menu_url = baseURL + 'api/admin.py?get=menu'
            axios.get(menu_url).then(res => {
                var getRouter = res.data // 后台拿到路由
                    // saveObjArr('router', getRouter) // 存储路由到localStorage
                _this.getRouter = routerGo(getRouter) // 执行路由跳转方法
            });
            this.menuselect(this.$route)
            this.getBreadcrumb()
        },
        watch: {
            $route() {
                this.getBreadcrumb()
            }
        },
        methods: {
            toggleClick() {
                if (this.isCollapse) {
                    this.isCollapse = false
                } else {
                    this.isCollapse = true;
                }
            },
            // 但路由有变化时
            onRouteChanged(index) {
                var indexPath = '/'
                if (index == undefined && this.$route.path) {
                    indexPath = this.$route.path
                } else {
                    indexPath = index.path
                }
                var gourl = 'pages/index.html?r=' + Math.random().toString() + '#' + indexPath;
                document.getElementById("appmain").src = gourl;
            },
            // 菜单被激活
            menuselect(index) {
                var goindex = '/'
                if (index == undefined && this.$route.path) {
                    goindex = this.$route.path
                } else if (index.path) {
                    goindex = index.path
                } else {
                    goindex = index
                }
                var gourl = 'pages/index.html?r=' + Math.random().toString() + '#' + goindex;
                document.getElementById("appmain").src = gourl;
            },
            resolvePath(basePath, routePath) {
                return basePath + '/' + routePath
                    // return path.resolve(this.basePath, routePath)
            },
            // ======== 面包屑 Start ==========
            getBreadcrumb() {
                let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
                const first = matched[0]
                if (!this.isDashboard(first)) {
                    matched = [{
                        path: '/',
                        meta: {
                            title: '系统首页'
                        }
                    }].concat(matched)
                }
                this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
            },
            isDashboard(route) {
                const name = route && route.name
                if (!name) {
                    return false
                }
                return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase()
            },
            handleLink(item) {
                const {
                    redirect,
                    path
                } = item
                if (redirect) {
                    this.menuselect(redirect)
                    return
                }
                this.menuselect(path)
            }
            // ======== 面包屑 End ==========
        },
        computed: {
            routes() {
                return this.getRouter
            }
        },
        router: router
    })
</script>

</html>